<template>
	<view class="container">
		<u-navbar :custom-back="handleToBack" :isMpWx="true" title="我的简历" :border-bottom="false"
			:background="{ background: '#fff' }">
			<template v-slot:right>
				<view class="u-flex" @tap="refresh">
					<u-icon name="reload" color="#101010" size="32"></u-icon>
					<text style="font-size: 24rpx;">刷新简历</text>
				</view>
			</template>
		</u-navbar>

		<view class="container_main u-p-b-160" id="targetDom" style="padding-bottom: 180rpx;">
			<view class="container_main_item" @click=" $u.throttle(goPersonal, 2000)">
				<text class="required litleNavBig">基本信息</text>
				<view class="u-flex u-row-between">
					<view class="u-flex u-m-t-26" v-if="data.datalist.basic">
						<u-avatar size="80" :src="data.datalist.basic.photo_img_src || ''"></u-avatar>
						<view class="u-m-l-10">
							<text
								class="litleNavBig">{{data.datalist.basic.fullname?data.datalist.basic.fullname:"姓名"}}</text>
							<view class="u-m-t-10 litleNav">
								<text>{{data.datalist.basic.age ? `${data.datalist.basic.age}岁`:'年龄'}}</text>
								<text>·{{data.datalist.basic.experience_text}}</text>
								<text>·{{data.datalist.basic.education_text || '学历'}}</text>
							</view>
						</view>
					</view>
					<u-icon name="edit-pen-fill" size="40" color="#000"></u-icon>
				</view>
			</view>
			<view class="container_main_item">
				<view class="u-flex u-row-between">
					<text class="required litleNavBig">求职意向</text>
					<u-icon name="plus-circle-fill" size="40" color="#00d075"
						@click="$u.throttle(goJobIntention(null), 2000)"></u-icon>
				</view>
				<view class="u-flex u-row-between u-m-t-32" v-for="item in data.datalist.intention_list" :key="item.id"
					@click="$u.throttle(goJobIntention(item), 2000)">
					<view class="litleNav">
						<view class="u-flex">
							<text class="u-m-r-20">[{{item.district_text || '靖江'}}]</text>
							<text class="u-m-r-20">{{item.category_text}}</text>
							<text>{{item.wage_text}}</text>
						</view>
						<view class="u-flex u-m-t-10">
							<text class="u-m-r-20">{{item.nature_text}}</text>
							<text>{{item.trade_text}}</text>
						</view>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<!-- 	<view class="container_main_item" @click="show = true">
				<text class="required litleNavBig">求职状态</text>
				<view class="u-flex u-row-between u-m-t-26">
					<text class="litleNav">{{data.datalist.basic.current_text || '请选择求职状态'}}</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view> -->
			<view class="container_main_item" @click="$u.throttle(speciality, 2000)"
				v-if="data.datalist&&data.datalist.basic">
				<view class="u-flex u-row-between">
					<text class="required litleNavBig">特长标签</text>
					<u-icon name="plus-circle-fill" size="40" color="#00d075"></u-icon>
				</view>
				<view class="u-m-t-26 litleNav tagbtnss">
					<view class="tagbtn" v-for="(item,index) in data.datalist.basic.tag_text_arr" :key="index">
						<text class="tagbytnone">{{item}}</text>
					</view>
					<text v-if="!data.datalist.basic.tag_text">请添加特长标签</text>
				</view>
			</view>

			<view class="container_main_item" @click="$u.throttle(goDesc, 2000)"
				v-if="data.datalist&&data.datalist.basic">
				<view class="u-flex u-row-between">
					<text class="required litleNavBig">自我描述</text>
					<u-icon name="edit-pen-fill" size="40" color="#000"></u-icon>
				</view>
				<view class="u-m-t-26 litleNav jobJl">
					{{data.datalist.basic.specialty || '请填写自我描述'}}
				</view>
			</view>
			<view class="container_main_item">
				<view class="u-flex u-row-between">
					<text class="litleNavBig">教育经历</text>
					<u-icon name="plus-circle-fill" size="40" color="#00d075"
						@click="$u.throttle(goEducation('add'), 2000)"></u-icon>
				</view>
				<view class="u-m-t-28" v-for="item in data.datalist.education_list" :key="item.id"
					@click="$u.throttle(goEducation('edit',item),2000)">
					<view class="u-flex u-row-between">
						<text class="litleNav textLang">{{item.school}}</text>
						<text class="litleNav"
							style="text-align: right;">{{item.endtime == 0 ?`${$u.timeFormat(item.starttime, 'yyyy.mm')}-至今` : `${$u.timeFormat(item.starttime, 'yyyy.mm')} - ${$u.timeFormat(item.endtime, 'yyyy.mm')}`}}</text>
					</view>
					<view class="u-flex u-row-between u-m-t-20">
						<view class="u-flex" style="color: #646464;font-size: 26rpx;">
							<text class="u-m-r-20">{{item.education_text}}</text>
							<text class="textLang" style="width: 60%;">{{item.major}}</text>
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>

			</view>
			<view class="container_main_item">
				<view class="u-flex u-row-between">
					<text class="litleNavBig">工作经历</text>
					<u-icon name="plus-circle-fill" size="40" color="#00d075"
						@click="$u.throttle(goWork('add'),2000)"></u-icon>
				</view>
				<view class="u-m-t-20" v-for="item in data.datalist.work_list" :key="item.id"
					@click="$u.throttle(goWork('edit',item),2000)">
					<view class="u-flex u-row-between u-m-b-16">
						<text class="litleNav textLang">{{item.companyname}}</text>
						<text class="litleNav"
							style="text-align: right;">{{item.endtime == 0 ?`${$u.timeFormat(item.starttime, 'yyyy.mm')}-至今` : `${$u.timeFormat(item.starttime, 'yyyy.mm')} - ${$u.timeFormat(item.endtime, 'yyyy.mm')}`}}</text>
					</view>
					<view class="u-flex u-row-between">
						<text class="u-m-b-10 litleNav">{{item.jobname}}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
					<text class="u-white-50 litleNav jobJl">{{`内容：${item.duty}`}}</text>
				</view>
			</view>
			<view class="container_main_item">
				<view class="u-flex u-row-between">
					<text class="litleNavBig">培训经历</text>
					<u-icon name="plus-circle-fill" size="40" color="#00d075"
						@click="$u.throttle(goTrain('add'),2000)"></u-icon>
				</view>
				<view class="u-m-t-20" v-for="item in data.datalist.training_list" :key="item.id"
					@click="$u.throttle(goTrain('edit',item),2000)">
					<view class="u-flex u-row-between u-m-b-16">
						<text class="litleNav textLang">{{item.agency}}</text>
						<text class="litleNav"
							style="text-align: right;">{{item.endtime == 0 ?`${$u.timeFormat(item.starttime, 'yyyy.mm')}-至今` : `${$u.timeFormat(item.starttime, 'yyyy.mm')} - ${$u.timeFormat(item.endtime, 'yyyy.mm')}`}}</text>
					</view>
					<view class="u-flex u-row-between">
						<text class="u-m-b-10 litleNav textLang">{{item.course}}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
					<view class="u-white-50 litleNav jobJl">{{`培训内容：${item.description}`}}</view>
				</view>
			</view>
			<view class="container_main_item">
				<view class="u-flex u-row-between">
					<text class="litleNavBig">项目经历</text>
					<u-icon name="plus-circle-fill" size="40" color="#00d075"
						@click="$u.throttle(toProject('add'),2000)"></u-icon>
				</view>
				<view class="u-m-t-20" v-for="item in data.datalist.project_list" :key="item.id"
					@click="$u.throttle(toProject('edit',item),2000)">
					<view class="u-flex u-row-between u-m-b-16">
						<text class="litleNav textLang">{{item.projectname}}</text>
						<text class="litleNav"
							style="text-align: right;">{{item.endtime == 0 ?`${$u.timeFormat(item.starttime, 'yyyy.mm')}-至今` : `${$u.timeFormat(item.starttime, 'yyyy.mm')} - ${$u.timeFormat(item.endtime, 'yyyy.mm')}`}}</text>
					</view>
					<view class="u-flex u-row-between">
						<text class="u-m-b-10 litleNav textLang">{{item.role}}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
					<text class="u-white-50 litleNav jobJl">{{`项目描述：${item.description}`}}</text>
				</view>
			</view>
			<view class="container_main_item">
				<view class="u-flex u-row-between">
					<text class="litleNavBig">获得证书</text>
					<u-icon name="plus-circle-fill" size="40" color="#00d075"
						@click="$u.throttle(goCertificate('add'),2000)"></u-icon>
				</view>
				<view class="container_main_item_tag u-flex">
					<view class="tagbox" v-for="item in data.datalist.certificate_list" :key="item.id"
						@click="$u.throttle(goCertificate('edit',item),2000)">
						<text>{{item.name }}</text>
						<view class="">
							<text>{{$u.timeFormat(item.obtaintime, 'yyyy.mm')}}</text>
							<u-icon size="28" color="#000" name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="container_main_item">
				<view class="titlezp">
					<text class="litleNavBig">我的作品</text>
					<text>最多上传6张</text>
				</view>

				<u-myUpload :file-list="data.fileList" ref="uUpload1" :multiple="false" :action="data.action"
					:header="data.header" @on-success="upsuccess" @on-remove="deletePic" :maxCount="6" name="file">
				</u-myUpload>
			</view>
		</view>
		<view class="tag" v-if="data.isTag">

			<view class="centertag">
				<text @tap="$u.throttle(goOptimize,2000)">简历有{{data.isCompleteData.no_complete_count}}个优化项</text>
				<u-icon @tap="data.isTag = false" class="iconclose" name="close-circle-fill" color="#8A8888"
					:size="45"></u-icon>
			</view>
		</view>
		<view class="container_btn">
			<u-button type="primary" hoverClass="none" :customStyle="data.customStyle" @click="$u.throttle(toPreview,2000)">预览简历</u-button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		useUserStore
	} from '/stores/userInfo.js'
	import development from '/config/development'
	import production from '/config/productions'
	import {
		onReady,
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	const host = process.env.NODE_ENV === 'development' ? development.host : production.host;
	const uUpload1 = ref(null)
	const data = ref({
		customStyle:{
			color:'#fff',
			background:'#00d075',
			bordern:'none'
		},
		isNav: true,
		// 在线简历数据
		datalist: {
			basic: {},
			intention_list: [],
			work_list: [],
			education_list: [],
			certificate_list: []
		},
		show: false,
		cur: -1,
		statusList: [],
		fileList: [],
		action: host + "/v1_0/personal/resume/imgAdd",
		header: {
			"user-token": uni.getStorageSync('token') ? uni.getStorageSync('token') : ""
		},
		isCompleteData: {},
		isTag: false,
	})
	// 返回上一页
	const handleToBack = () => {
		var pages = getCurrentPages();
		var page = pages[pages.length - 2];
		if (page == undefined) {
			uni.$u.route({
				type: 'reLaunch',
				url: '/pages/login/status'
			})
		} else {
			uni.$u.route({
				type: 'back'
			})
		}
	}
	const refresh = async () => {
		let res = await uni.$u.api.refresh({}) //刷新简历
		if (res) {
			uni.$u.toast('刷新成功')
		}
	}
	// 获取在线简历数据
	const getOnlineMangeData = async () => {
		let res = await uni.$u.api.getOnlineMange()
		if (res) {
			data.value.datalist = res
			if (data.value.datalist.img_list.length != 0) {
				data.value.fileList = res.img_list.map(item => {
					return {
						url: item.img_src,
						id: item.id,
						audit: item.audit
					}
				})
			}
		}
	}
	// 去个人信息
	const goPersonal = () => {
		uni.$u.route('pages/pagesPersonal/myResume/information/information')
	}
	//去特长标签
	const speciality = () => {
		uni.$u.route('pages/pagesPersonal/myResume/strong/strong', {
			item: encodeURIComponent(JSON.stringify(data.value.datalist.basic.tag))
		})
	}
	// 去教育经历
	const goEducation = (type, item) => {
		uni.$u.route('pages/pagesPersonal/myResume/education/education', {
			type,
			item: encodeURIComponent(JSON.stringify(item))
		})
	}
	//去项目经历
	const toProject = (type, item) => {
		uni.$u.route('pages/pagesPersonal/myResume/Project/Project', {
			type,
			item: encodeURIComponent(JSON.stringify(item))
		})
	}
	// 去求职意向
	const goJobIntention = (item) => {
		uni.$u.route('/pages/pagesHome/jobIntention/detail', {
			type: item ? 'edit' : 'add',
			item: JSON.stringify(item)
		})
	}
	// 去自我描述
	const goDesc = () => {
		uni.$u.route('pages/pagesPersonal/myResume/information/child/child', {
			item: encodeURIComponent(JSON.stringify(data.value.datalist.basic.specialty)),
			type: 1
		})
	}
	// 去工作经历
	const goWork = (type, item) => {
		uni.$u.route('pages/pagesPersonal/myResume/experience/experience', {
			type,
			item: encodeURIComponent(JSON.stringify(item))
		})
	}
	// 去获得证书
	const goCertificate = (type, item) => {
		uni.$u.route('pages/pagesPersonal/myResume/certificate/certificate', {
			type,
			item: encodeURIComponent(JSON.stringify(item))
		})
	}
	//去培训经历
	const goTrain = (type, item) => {
		uni.$u.route('pages/pagesPersonal/myResume/train/train', {
			type,
			item: encodeURIComponent(JSON.stringify(item))
		})
	}
	const upsuccess = (res, index, lists, name) => {

		uUpload1.value.remove(index)
		if (res.code == 200) {
			data.value.fileList.push({
				url: res.data.file_url,
				id: res.data.id,
				audit: res.data.audit
			})
			lists.push({
				url: res.data.file_url,
				id: res.data.id,
				audit: res.data.audit
			})
			uni.$u.toast('上传成功')
		}

	}
	// 删除图片
	const deletePic = async (index, lists) => {
		let params = {
			id: data.value.fileList[index].id
		}
		let res = await uni.$u.api.getWorksDel(params)
		if (res) {
			console.log(res)
			uni.$u.toast('删除成功')
			data.value.fileList.splice(index, 1)
		}

	}
	//获取简历待优化项
	const isComplete = async () => {
		let res = await uni.$u.api.isComplete()
		if (res) {
			data.value.isCompleteData = res
			if (data.value.isCompleteData.no_complete_count == 0) {
				data.value.isTag = false
			} else {
				data.value.isTag = true
			}
		}
	}
	const toPreview = () => {
		uni.$u.route('pages/pagesPersonal/preview/preview')
	}
	const goOptimize = () => {
		uni.$u.route('pages/pagesPersonal/myResume/optimize/optimize')
	}
	onShow(() => {
		isComplete()
		getOnlineMangeData()
	})
	onLoad(() => {})
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.container {

		&_main_item {
			padding: 28rpx 50rpx;
			border-bottom: 1rpx solid #eee;

			&_tag {
				flex-wrap: wrap;

				.tagbox {
					width: 100%;
					padding: 8rpx 0;
					font-size: 26rpx;
					color: #767676;
					// background-color: #dcdcdc;
					// margin-right: 12rpx;
					margin-top: 10rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
		}

		:deep(.u-navbar) {
			padding-right: 30rpx !important
		}

		.u-flex {
			// margin-right: 20rpx;

			text {
				white-space: nowrap !important;
			}
		}

		&_btn {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			margin: 0 auto;
			padding: 40rpx;
			z-index: 999;
			background-color: #fff;

			&_custom {
				border: 1px solid #00d075 !important;
				color: #00d075 !important;
			}
		}

		.job_status {
			padding-top: 38rpx;

			.ls_item {
				padding: 19rpx 0;
				text-align: center;
				font-size: 32rpx;
				color: #000000;
				border-bottom: 1rpx solid #CCCCCC;
			}

			.ls_item--active {
				color: #00d075;
				padding: 19rpx 0;
				text-align: center;
				font-size: 32rpx;
				border-bottom: 1rpx solid #CCCCCC;
			}
		}
	}

	.litleNav {
		color: #646464;
		font-size: 26rpx;
	}

	.litleNavBig {
		color: #000;
		font-size: 36rpx;
		font-weight: bold;
	}

	.tag {
		position: fixed;
		bottom: 182rpx;
		right: 55rpx;
		width: 240rpx;
		height: 50rpx;
		background: #8A8888;
		border-radius: 25rpx;

		.centertag {
			width: 100%;
			color: #fff;
			font-size: 22rpx;
			line-height: 50rpx;
			text-align: center;

			.iconclose {
				position: absolute;
				top: -55rpx;
				right: 0rpx;
			}

		}
	}

	.jobJl {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		/* 多行文本排列方式 */
		-webkit-line-clamp: 3;
		/* 最多显示2行 */
		-webkit-box-orient: vertical;
		/* 文本排列方向 */
		// width: 120px;
		width: 100%;
	}

	.textLang {
		display: inline-block;
		width: 50%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.tagbtnss {
		display: flex;
		flex-wrap: wrap;

		.tagbtn {
			height: 50rpx;
			margin: 6rpx;

			.tagbytnone {
				padding: 10rpx;
				background-color: #f8f8f8;
				border-radius: 6rpx;
			}
		}
	}

	.titlezp {
		width: 100%;
		margin-bottom: 15rpx;

		text:nth-child(2) {
			margin-left: 20rpx;
			color: #999;
			font-size: 24rpx;
		}
	}
</style>